<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题 - 中华非遗</title>
    
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏容器  -->
    <div id="navbar-container">
        <!-- 导航栏将通过组件动态生成 -->
    </div>

    <!-- 主要内容区域 -->
    <main style="margin-top: 70px;">
        <div class="container">
            <h1>页面标题</h1>
            <p>这里是页面内容...</p>
            
            <!-- 您的页面内容 -->
            <section class="content-section">
                <h2>内容区块</h2>
                <p>在这里添加您的页面内容。</p>
            </section>
        </div>
    </main>

    <!-- 页面底部 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>致力于保护和传承中华民族非物质文化遗产</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="about.html">认识非遗</a></li>
                        <li><a href="explore.html">走近非遗</a></li>
                        <li><a href="heritage.html">传习非遗</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱: info@heritage.cn</p>
                    <p>电话: 010-12345678</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 中华非遗. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript脚本 -->
    <!-- 1. 首先引入导航栏组件 -->
    <script src="scripts/navbar-component.js"></script>
    
    <!-- 2. 如果需要其他组件，在这里引入 -->
    <!-- <script src="scripts/ai-chat-final.js"></script> -->
    
    <script>
        /**
         * 页面初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航栏组件
            initNavbar({
                activePage: 'home',  // 🔥 重要：将此处改为当前页面的ID
                themeClass: 'theme-default'  // 可选：设置主题类
            });
            
            // 在这里添加其他页面特定的初始化代码
            initPageSpecificFeatures();
        });
        
        /**
         * 页面特定功能初始化
         */
        function initPageSpecificFeatures() {
            // 在这里添加当前页面特有的功能
            console.log('页面初始化完成');
            
            // 示例：添加页面特定的事件监听
            // const button = document.getElementById('my-button');
            // if (button) {
            //     button.addEventListener('click', handleButtonClick);
            // }
        }
        
        /**
         * 示例：按钮点击处理函数
         */
        function handleButtonClick() {
            console.log('按钮被点击了');
        }
    </script>
</body>
</html>

<!-- 
使用说明：
===========

1. 复制此模板文件
2. 重命名为您的页面文件名（如：explore.html）
3. 修改以下内容：
   - <title> 标签中的页面标题
   - activePage 的值为对应的页面ID：
     * index.html → 'home'
     * about.html → 'about'  
     * explore.html → 'explore'
     * heritage.html → 'heritage'
     * profile.html → 'profile'
   - <main> 区域中的页面内容
   - 页面特定的JavaScript功能

4. 就是这么简单！导航栏会自动生成，无需手动编写HTML

页面ID对应表：
===============
文件名          页面ID        菜单显示名
index.html   →  'home'     →  首页
about.html   →  'about'    →  认识非遗
explore.html →  'explore'  →  走近非遗
heritage.html→  'heritage' →  传习非遗
profile.html →  'profile'  →  个人中心

高级用法：
==========
如果需要自定义导航栏，可以传入更多配置：

initNavbar({
    activePage: 'about',
    siteName: '自定义网站名',
    logoIcon: 'fas fa-dragon',
    themeClass: 'theme-custom',
    customClass: 'my-navbar'
});

--> 